<!--
 * Description: 报价系列新增页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/05/18 17:07
-->

<template>
  <div>
    <div v-if="formData.fdRowId">
      <!--数据表单-->
      <el-form label-width="150px" :model="formData" size="mini">
        <el-row>
          <!--commodity采购分类-->
          <el-col :span="12">
            <el-form-item :label="$t('FdData.commodity')">
              <el-select
                v-model="formData.commodity"
                clearable
                filterable
                :placeholder="$t('select.placeholder')"
                size="mini"
                style="width: 100%"
              >
                <el-option
                  v-for="item in $store.getters['commodity/getCommodityCollectsByGcmFunction'](
                    formData.gcmFunction
                  )"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #b4b4b4; font-size: 12px">
                    {{ item.gcmFunction }}
                  </span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!--gcmFunction-->
          <el-col :span="12">
            <el-form-item :label="$t('FdData.gcmFunction')">
              <el-select
                v-model="formData.gcmFunction"
                clearable
                filterable
                :placeholder="$t('select.placeholder')"
              >
                <el-option
                  v-for="item in $store.getters['enums/getGcmFunctionListOnly']"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!--computedResult-->
          <el-col :span="24">
            <el-form-item :label="$t('FdData.computedResult')">
              <el-input
                v-model="formData.computedResult"
                :autosize="{ minRows: 3, maxRows: 15 }"
                style="font-size:14px"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span style="display: block; text-align: center; margin-top: 5px">
        <!--取消按钮-->
        <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
        <!--保存按钮-->
        <el-button :loading="isRequesting" size="medium" type="primary" @click="save">
          {{ $t('button.save') }}
        </el-button>
      </span>
    </div>
    <div v-else style="text-align: center;color: #ccc;">
      {{ '暂无数据' }}
    </div>
  </div>
</template>

<script>
import {
  modelComputedResultLogEditResultLog,
  modelComputedResultLogQuery
} from '@/api/model/computed-result-log'

export default {
  name: 'FdEditCostModel',
  props: {
    fdRowId: {
      default: () => null,
      type: String
    }
  },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      formData: {
        fdRowId: '',
        commodity: '',
        gcmFunction: '',
        computedResult: ''
      }
    }
  },
  mounted() {
    this.pageDataInit()
  },
  methods: {
    async pageDataInit() {
      try {
        this.isRequesting = true
        const res = await modelComputedResultLogQuery({
          fdRowId: this.fdRowId
        })
        if (res.data) {
          this.formData = res.data
          this.formData.computedResult = JSON.stringify(
            JSON.parse(res.data.computedResult),
            null,
            '\t'
          )
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    async save() {
      try {
        this.isRequesting = true
        await modelComputedResultLogEditResultLog(this.formData, {
          msgSuccess: true,
          msgError: true
        })
        this.$emit('cancel')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
